<!--企业档案列表-->
<template>
	<view>
		<!--每一项-->
		<view class="order" v-for="(item,index) in qyData" :key="item.id">
			<view class="cu-list" style="margin-left: 50rpx;">
				<view class="cu-item cugrid">
					<view class="content" @click="gajin(item)">
						<view class="text-grey textgr text-ui">
							{{item.name}}
						</view>
						<view class="view-mk" style="margin-left: -50rpx;">
							{{index < 9 ? "0" + (index +1) : index + 1}}
						</view>
						<view class="text-grey textgr text-hg">
							法定代表人:{{item.primaryDirectorName}}
						</view>
						<view class="text-grey textgr text-hg">
							组织机构代码:{{item.creditCode}}
						</view>
					</view>
					<view>
						<view style="margin-right: -10px;">
							<u-button type="primary" class="custom-style" color="#225ea4" size="mini" shape="circle">
								{{enterprise_type[item.type]}}
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--- unAPP官网组件日期选择器上拉弹出框-->
		<view>
			<u-popup :show="show" mode="top" @close="close" @open="open" :overlay="false">
				<!--市区联动-->
				<view class="container" style="padding:0 24px;margin-top: 20px;">
					<uni-section title="" type="line" padding style="height: calc(100vh - 100px);">
						<uni-data-picker ref="clearCity" placeholder="请选择所在地区" popup-title="请选择所在地区"
							:localdata="dataTree" v-model="classes" @change="onchange" @popupopened="onpopupopened"
							@popupclosed="onpopupclosed">
						</uni-data-picker>
					</uni-section>
				</view>

				<!--矿山企业-->
				<view class="container" style="padding:0 24px;margin-top: 20px;">
					<uni-section title="" type="line" padding style="height: calc(100vh - 100px);">
						<picker @change="bindPickerChange" :value="index" :range="qyData" range-key="name">
							<view class="uni-input ksqy" v-if="index === -1">请选择矿山企业</view>
							<view class="uni-input ksqy ksqys-active" v-else>{{name}}</view>
							<!-- <view class="uni-input ksqy" v-else>12313</view> -->
						</picker>
					</uni-section>
				</view>

				<!-- 	<view style="padding: 5px 24px">
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" :value="index" :range="qyData" range-key="name">
									<view class="uni-input" v-if="qyData.length >0">{{qyData[index].name}}</view>
								</picker>
							</view>
						</view>
					</view>
				</view> -->
				<view style="padding: 5px 24px">
					<view class="button-sp-area" style="text-align: center">
						<button class="mini-btn btncas-one" @click="btnCancel()" type="default" size="mini">
							取消
						</button>
						<button class="mini-btn btncas" style="background-color: #225EA4; color: #fff;" size="mini"
							@click="searchval()">
							确认
						</button>
					</view>
				</view>

			</u-popup>
		</view>
		<view v-if="qyData.length==0" class="zw-sj">
			暂无数据...
		</view>
	</view>
</template>

<script>
	import {
		qyList
	} from '@/api/my/qy.js'
	import {
		cityList
	} from "@/api/my/city.js";
	import {
		mapState
	} from 'vuex' //引入mapState
	export default {
		data() {

			// const currentDate = this.getDate({
			// 	format: true
			// })

			return {
				// disabledksqy: false,
				qyid: "",
				index: -1,
				name: '',
				qylb: [],
				num: "",
				qyData: [],
				qyId: null,
				// 下拉框选择企业
				show: false,

				dataList: {
					code: "",
					enterpriseInfoId: ""
				},
				qy: 0,
				value: -1,
				warnId: null,
				showSex: false,
				model1: {
					userInfo: {
						// name: 'uView UI',
						sex: '',
					},
				},
				actions: [],
				radio: '',
				switchVal: false,
				//

				single: '',
				classes: "610921",
				dataTree: [],
				// 下拉框选择企业完
				datetimesingle: '',
				datetimerange: [],
				start: Date.now() - 1000000000,
				end: Date.now() + 1000000000,


			};
		},
		watch: {
			datetimesingle(newval) {
				// console.log('单选:', this.datetimesingle);
			},
			range(newval) {
				// console.log('范围选:', this.range);
			},
			datetimerange(newval) {
				// console.log('范围选:', this.datetimerange);
			}
		},

		computed: {
			...mapState({
				enterprise_type: state => state.sjzd.sjzdList.enterprise_type,
			})
		},



		// computed: {
		// 	startDate() {
		// 		return this.getDate('start');
		// 	},
		// 	endDate() {
		// 		return this.getDate('end');
		// 	}
		// },


		mounted() {
			this.getQyList()
		},
		//注意函数和data同级,不要写在methods内
		onNavigationBarButtonTap(e) {
			// console.log("@@@", e)
			this.show = true
			// this.$tab.navigateTo('/pages/my/setting/index')
		},
		methods: {
			// 查询
			searchval() {

				let data = this.dataList
				console.log("查询", data)
				this.getQyList(this.dataList) //行政
				this.show = false
				// this.$refs.clearCity.clear()
			},


			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			change(e) {
				this.single = e
				console.log('change事件:', this.single = e);
			},
			changeLog(e) {
				console.log('change事件:', e);
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			// 市区联动js
			onnodeclick(e) {},
			onpopupopened(e) {
				this.getCityList();
			},
			onpopupclosed(e) {
				// console.log('popupclosed');
			},
			onchange(e) {
				console.log("@@@@@@@@@@@@@@@@@@@@@", this.classes)
				console.log("onchange123112332", e.detail.value); //  市区的行政区划号
				if (e.detail.value.length === 0) {
					this.dataList.code = ""
				} else {
					this.dataList.code = e.detail.value[1].value //区的 号 610102
				}
				this.dataList.enterpriseInfoId = ""
				this.index = -1
				this.name = ""

				// this.show = true

				// let {
				// 	code
				// } = this.dataList
				// this.getQyList({
				// 	code: this.dataList.code // 区的号
				// })
			},
			// 下拉框选择企业
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			gajin(item) {
				this.qyId = item.id;
				uni.navigateTo({
					url: `/pages/my/enterprisefiles/filedetails/index?id=${this.qyId}`
				});
			},
			btnCancel() {
				this.show = false
			},
			// 单独查询
			bindPickerChange: function(e) {
				// console.log("415155", e)
				const index = e.detail.value
				this.index = index
				this.dataList.enterpriseInfoId = this.qyData[index].id
				this.name = this.qyData[index].name
				//console.log("@@@@@@@@@", this.qyData[index].id)
				// this.getQyList(this.dataList);

			},



			// 触底
			onReachBottom() {
				if (this.num < this.qylb.length) {
					this.num = this.num + 10
					this.qyData.push(...this.qylb.slice(this.num, this.num + 10))
				}

			},
			// 企业列表数据
			getQyList(data) {
				uni.showLoading({
					title: '加载中'
				});
				qyList(data).then((result) => {

					uni.hideLoading();
					const data = result.data;
					console.log("&&&&&&&&", data)
					this.qylb = data
					this.qyData = data

					console.log(this.qyData)
				}).catch((err) => {
					console.log(err)
				})
			},

			//点击查询获取列表
			getList() {
				qyList().then((result) => {

				}).catch((err) => {
					console.log(err)
				})
			},

			// 城市数据
			getCityList() {
				cityList()
					.then((result) => {
						console.log("@@@@@@@@@", result)
						const data = result.data;
						this.dataTree = data.map((item) => {
							return {
								value: item.regionCode,
								text: item.name,
								children: item.children.map((item1, index1) => {
									return {
										value: item1.regionCode,
										text: item1.name
									}
								})
							}
						})

					})

			},
		},
	}
</script>

<style lang="scss" scoped>
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		box-shadow: 0px 3px 10px 0px rgba(148, 177, 188, 0.38);
	}

	.page {
		height: 100Vh;
		width: 100vw;
	}



	.cu-list.menu-avatar>.cu-item {
		position: relative;
		display: flex;
		padding-right: 10rpx;
		height: 380rpx;
		background-color: #ffffff;
		justify-content: flex-end;
		align-items: center;
		margin-top: 30rpx;
		border-radius: 30rpx;
	}

	.cu-list.menu-avatar>.cu-item[data-v-0b41208f] {
		position: relative;
		display: flex;
		padding-right: 10rpx;
		height: 380rpx;
		background-color: #ffffff;
		justify-content: flex-end;
		align-items: center;
		margin-top: 30rpx;
		border-radius: 30rpx;
	}

	.cu-list.menu-avatar>.cu-item .content {
		position: absolute;
		left: 0px;
		width: calc(100% - 52px - 33px - 66px - 11px);
		line-height: 1.6em;
	}

	.text-grey,
	.line-grey,
	.lines-grey {
		color: #848484;
	}

	.text-orange,
	.line-orange,
	.lines-orange {
		color: #343434
	}

	.cu-list>.cu-item {
		transition: all .6s ease-in-out 0s;
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}

	.textgr {
		line-height: 48rpx;
	}

	.cugrid {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;

	}

	.example-body {
		background-color: #fff;
		padding: 10px;
	}

	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.u-form-item__body {
		display: flex;
		flex-direction: row;
		padding: 4px 0;
		border: 1px solid #e5e5e5;
	}

	.example-body[data-v-b41e3472] {
		background-color: #fff;
		padding: 22px 14px 18px 16px;
	}

	.text-ui {
		font-size: 16px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #343434;
	}

	.text-hg {
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #595959;
	}

	.cugrid {
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
	}

	.view-mk {
		width: 44px;
		height: 38px;
		background-color: #225ea4;
		border-radius: 0px 21px 20px 0px;
		top: 19px;
		position: absolute;
		left: -23px;
		color: #eee;
		text-align: center;
		line-height: 36px;
		font-size: 16px;
		font-style: italic;
		font-weight: 600;
	}

	.custom-style {
		color: #ff0000;
	}

	.cugrid[data-v-531be18f] {
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
		margin-right: -20px;
	}

	.ksqy {
		border: 1px solid #e5e5e5;
		border-radius: 5px;
		line-height: 32px;
		padding-left: 9px;
		font-size: 12px;
		color: #808080;
	}

	.ksqys-active {

		font-size: 14px;
		color: #333333;
	}

	.zw-sj {
		text-align: center;
		font-size: 14px;
		color: #666;
		margin-top: 15px;

	}

	uni-button {
		display: inline-block;
		line-height: 2.3;
		font-size: 13px;
		padding: 0 1.34em;
		margin: 6px;
	}
</style>
